<template>
    <van-sticky>
        <van-nav-bar
            title="我的订单"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        > 
        </van-nav-bar>
    </van-sticky>

    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab v-for="(item,index) in statusList" :name="item.value" :title="item.text"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check="true"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <!-- 商品卡片 -->
            <van-card
                v-for="(item, key) in list"
                :title="item.info.products.name"
                :thumb="item.info.products.thumb_cdn"
                :num="item.info.pronum"
                :tag="item.status_text"
                @click-thumb="toProductInfo(item.info.proid)"
            >
            <template #title>
                <div class="title">订单号：{{item.code}}</div>
            </template>

            <!-- 卡片的插槽部分 -->
            <template #desc v-if="item.info.attrs">
                <van-tag v-for="(attr,index) in JSON.parse(item.info.attrs)" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
            </template>
            <template #desc v-else>
                <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>

            <template #tags>
                <div class="price">下单时间：{{item.createtime_text}}</div>
            </template>

            <template #price>
                <div class="price">订单总价：￥{{item.amount}}</div>
            </template>

            <template #footer>
                
                <!-- status = 1 仅退款 -->
                <van-button type="danger" size="small" v-if="item.status == '1'" @click="onOrderApply(item.id)">申请退款</van-button>

                <!-- status = -1 -->
                <van-button type="danger" size="small" v-if="item.status == '-1'">已提交申请，等待商家审核...</van-button>


                <!-- status = 2 -->
                <van-button type="success" size="small" v-if="item.status == '2'" @click="onOrderConfirm(item.id)">确认收货</van-button>
                <van-button type="warning" size="small" v-if="item.status == '2'" @click="ToExpress(item.id)">物流详情</van-button>
                <van-button type="danger" size="small" v-if="item.status == '2'" @click="onOrderApply(item.id)">申请退货退款</van-button>

                <!-- status = -2 退货退款 -->
                <van-button type="danger" size="small" v-if="item.status == '-2'">已提交申请，等待商家审核...</van-button>

                <!-- status = -3 -->
                <van-button type="success" size="small" v-if="item.status == '-3'" @click="ToBackAdd(item.id)">填写退货信息</van-button>

                <!-- status = 3 已收货 -->
                <van-button type="warning" size="small" v-if="item.status == '3'" @click="ToComment(item.defineSlots)">立即评价</van-button>

                <van-button type="primary" size="small" @click="ToOrderInfo(item.id)">订单详情</van-button>


                
                <!--<van-button type="primary" size="small">退货详情</van-button> -->
            </template>
            </van-card>
        </van-list>
    </van-pull-refresh>

</template>

<script setup>
const { proxy } = getCurrentInstance();
const active = ref(0);

const statusList = ref([
    {text:'全部',value:0},
    {text:'待发货',value:1},
    {text:'待收货',value:2},
    {text:'待评价',value:3},
    {text:'已完成',value:4},
    {text:'退货退款',value:-1},
])

const list = ref([]);
const listCount = ref(0);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const business = ref(proxy.$cookies.get('business') ?? {});

const onClickTab = (name) => {
    onRefresh();
}

const onRefresh = () => {
    list.value = [];
    page.value = 1;
    finished.value = false;
    loading.value = true;

    setTimeout(onLoad,1500);
}

const onLoad = async () => {
    if(refreshing.value)
    {
        refreshing.value = false;
    }

    let params = {
        busid:business.value.id,
        page:page.value,
        status:active.value
    }

    let result = await proxy.$post({
        url:'/product/order/index',
        params
    })

    if(result.code === 1)
    {
        list.value = list.value.concat(result.data.list);
        listCount.value = result.data.count;

        finished.value = false;
        loading.value = false;

        if(list.value.length === listCount.value)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else{
        proxy.$warnNotify(result.msg);

        finished.value = true;
    }
}

// 申请整个订单退货退款
const onOrderApply = (orderid) => {

}

//确认收货
const onOrderConfirm = (orderid) =>{
    proxy.$showConfirm({
        title:'确认收货',
        message:'是否确认收货？'
    }).then((result) => {

    }).catch((err) => {

    }); 
}

const ToComment = (orderid) => {

}

//查看物流信息
const ToExpress = (orderid) => proxy.$router.push({path:'/product/order/express',query:{orderid}})

// 查看订单详情
const ToOrderInfo = (orderid) => proxy.$router.push({path:'/product/order/info',query:{orderid}})

const onBack = () => proxy.$router.push('/business/base/index');
</script>